<template>
  <!-- {{ baseUrl + props.url }} -->
  <el-image
    :src="'http://zhongshijh.top' + props.url"
    fit="fill"
    loading="lazy"
    style="width: 100%; height: 100%"
  >
    <template #error>
      <div class="image-slot">
        <el-icon><icon-picture /></el-icon>
      </div>
    </template>
  </el-image>
</template>

<script setup lang="ts">
import { ref, onMounted } from "vue";
import FileAPI from "@/api/file";
import { Picture as IconPicture } from "@element-plus/icons-vue";

// const baseUrl = import.meta.env.VITE_BASE_URL;
const props = defineProps({
  url: {
    type: String,
    required: true,
  },
});

// const src = ref("");
// const isLoading = ref(true);
// // 子组件 uploadImage.vue
// const previewCache = new Map<string, string>(); // 新增缓存池

// async function handlePreviewFileByPath(url: string) {
//   if (url.startsWith("blob:")) return; // 如果是 blob URL 直接返回

//   // 存在缓存直接返回
//   if (previewCache.has(url)) {
//     src.value = previewCache.get(url)!;
//     return;
//   }

//   try {
//     const res = await FileAPI.previewFile(url);
//     const blob = new Blob([res.data], {
//       type: res.headers["content-type"], // 关键修复点
//     });

//     const objectURL = URL.createObjectURL(blob);
//     previewCache.set(url, objectURL); // 存入缓存
//     src.value = objectURL;
//   } catch (error) {
//     console.error("图片加载失败:", error);
//   }
// }

// // 组件卸载时释放资源
// onUnmounted(() => {
//   previewCache.forEach((url) => URL.revokeObjectURL(url));
// });
// onMounted(() => {
//   if (props.url) {
//     handlePreviewFileByPath(props.url); // 移除非必要的类型断言
//   }
// });
</script>

<style scoped>
.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  background: var(--el-fill-color-light);
  color: var(--el-text-color-secondary);
  font-size: 30px;
}
.demo-image__error .image-slot .el-icon {
  font-size: 30px;
}
</style>
